<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    
  </style>
</head>

<body>

  <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3.2.31/dist/vue.esm-browser.js"
          // https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js
        }
      }
    </script>

    <!--
We can create two-way bindings between state and form inputs using the v-model directive.
-->

<script type="module">
  import { createApp, ref } from 'vue'
  
  createApp({
    setup() {
      const text = ref('Edit me')
      const checked = ref(true)
      const checkedNames = ref(['Jack'])
      const picked = ref('One')
      const selected = ref('A')
      const multiSelected = ref(['A'])
  
      return {
        text,
        checked,
        checkedNames,
        picked,
        selected,
        multiSelected
      }
    }
  }).mount('#app')
  </script>
  
  <div id="app">
    <h2>Text Input</h2>
    <input v-model="text" id="inputElement"> {{ text }}
  
    <h2>Checkbox</h2>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">Checked: {{ checked }}</label>
  
    <!--
      multiple checkboxes can bind to the same
      array v-model value
    -->
    <h2>Multi Checkbox</h2>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <p>Checked names: <pre>{{ checkedNames }}</pre></p>
  
    <h2>Radio</h2>
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
  
    <h2>Select</h2>
    <select v-model="selected">
      <option disabled value="">Please select one</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
  
    <h2>Multi Select</h2>
    <select v-model="multiSelected" multiple style="width:100px">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>Selected: {{ multiSelected }}</span>
  </div>
  
</body>

</html>